<template>
    <addTypeView ref="addTypeView" />
    <PersonneListView ref="PersonneListView" />
    <div class="container">
        <div class="main">
            <div class="tab" style="margin-bottom: 20px;">维修报修>报修类型</div>

            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="">
                        <el-input placeholder="请输入报修类型" v-model="form.name">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <el-input placeholder="请输入报修地点" v-model="form.address">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button class="serach_btn" type="primary" plain @click="getList"
                            @keyup.enter="searchEnter"><el-icon style="margin-right: 10px;">
                                <Search />
                            </el-icon>搜索</el-button>
                        <el-button class="reset_btn" type="success" plain @click="addType">
                            <el-icon style="margin-right: 10px;">
                                <RefreshRight />
                            </el-icon>添加</el-button>
                    </el-form-item>

                </el-form>
            </div>

            <div class="filterBox" style="height: 20px;">

            </div>

            <div class="table_box">
                <el-table size="default" :data="list" style="width: 100%" :header-cell-style="headerCellStyle"
                    :row-style="rowClassName">
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="name" label="类型" />
                    <el-table-column label="操作" width="400px">
                        <template style="display: block" #default="scope">
                            <el-button class="edit_btn" style="margin-right: 20px;" size="small" type="success"
                                @click="personnelHandle(scope.row, 1)">管理员</el-button>
                            <el-button class="edit_btn" style="margin-right: 20px;" size="small" type="success"
                                @click="personnelHandle(scope.row, 2)">维修员</el-button>
                            <!-- <el-button class="edit_btn" style="margin-right: 20px;" size="small" type="success"
                                @click="personnelHandle(scope.row)">人员列表</el-button> -->
                            <el-button class="edit_btn" style="margin-right: 20px;" size="small" type="success"
                                @click="editType(scope.row)">编辑</el-button>
                            <el-button class="del_btn" size="small" type="danger"
                                @click="deleteType(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
            </div>

            <div class="page_box">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="pageSize" :current-page="page"
                        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
    </div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { Search, RefreshRight } from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import addTypeView from "../../components/newRepair/addTypeView.vue"
import PersonneListView from "../../components/newRepair/PersonneListView.vue"

export default {
    name: "MedicalProductIndex",
    components: { ElConfigProvider, ElMessage, Search, RefreshRight, addTypeView, PersonneListView },
    data() {
        return {
            form: {
                name: "",
                address: "",
            },
            total: 0,
            page: 1,
            pageSize: 10,
            list: []
        };
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getBaseStudentList();
            }
        },
        onSubmit() { },
        headerCellStyle() {
            return {
                background: '#EFF3F7',
                color: "#5B5A7E",
            };
        },
        rowClassName() {
            return {
                height: '53px',
                color: "#5B5A7E",
            };
        },

        changePageSize(size) {
            this.pageSize = size;
            this.getList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getList();
        },

        getList() {
            httpService(`/javaApi/repairTypeInfo/list/${this.page}/${this.pageSize}`, { name: this.form.name }, "get").then((data) => {
                console.log(data);
                if (data && data.total > 0) {
                    this.list = data.list
                    this.total = data.total
                }
            })
        },

        addType() {
            this.$refs.addTypeView.flag = true
        },
        editType(data) {
            this.$refs.addTypeView.flag = true
            this.$refs.addTypeView.queryById(data.id)
        },
        personnelHandle(data, index) {
            this.$refs.PersonneListView.dialogFormVisible = true;
            this.$refs.PersonneListView.typeId = data.id
            this.$refs.PersonneListView.userType = index
            this.$refs.PersonneListView.queryAllManager()
        },

        deleteType(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService(
                        "/javaApi/repairTypeInfo/deleteById", "id=" + id, "post").then((data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getList()
                            } else {
                                ElMessage.error("删除失败");
                            }
                        });
                })
                .catch(() => { });
        },

    },
};
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: 100%;
    height: calc(100% - 20px);
    padding-top: 20px;
}

.main {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    background-color: #fff;
}

.app-search .el-input {
    height: 36px;
}

.serach_btn {
    width: 80px;
    height: 36px;
    background-color: #007EFF;
    border-radius: 3px;
    color: #fff;
    font-size: 15px;
    border: none;
    outline: none;
}

.reset_btn {
    width: 80px;
    height: 36px;
    border: 1px solid #007EFF;
    border-radius: 3px;
    color: #007EFF;
    background-color: #fff;
    font-size: 15px;
    outline: none;
}

.serach_btn .el-icon,
.reset_btn .el-icon {
    font-size: 16px;
}


.edit_btn {
    background-color: transparent;
    color: #007EFF;
    border: none;
}

.del_btn {
    background-color: transparent;
    color: #FF0000;
    border: none;
}

.table_box {
    height: calc(100% - 145px)
}

.page_box {
    border: 1px solid #E5E5EF;
    padding: 9px 16px;
}
</style>